<template>
  <div>
    <!-- 历史销售单 -->
    <!-- <el-scrollbar
      class="history text-[0.7rem]"
      style="height: calc(100vh - 10rem)"
    >
      
    </el-scrollbar> -->

    <div
      style="height: calc(100vh - 10.1rem); overflow-y: auto"
      class="text-[0.7rem]"
      v-infinite-scroll="scroll_load"
    >
      <el-card
        v-for="item in tableData"
        :key="item.id"
        class="mb-2 order_item"
        @click="handleDetailBtn(item.id)"
      >
        <template #header>
          <div class="w-full flex justify-between items-center">
            <span>{{ item.orderCode }}</span>

            <el-tag type="success" v-if="item.status == 3">
              {{ item.isProcess == 1 ? "已加工" : "已出库" }}
            </el-tag>
            <el-tag type="primary" v-else-if="item.status == 2">
              {{ item.isProcess == 1 ? "待加工" : "待出库" }}
            </el-tag>
            <el-tag type="warning" v-else-if="item.status == 1"> 草稿 </el-tag>
            <el-tag type="danger" v-else-if="item.status == 4"> 已废弃 </el-tag>
          </div>
        </template>

        <el-descriptions direction="vertical" :column="1" border>
          <el-descriptions-item label="销售金额(元)">
            {{ item.paidAmount ? (item.paidAmount / 100).toFixed(2) : 0 }}
          </el-descriptions-item>
          <el-descriptions-item label="销售数量">
            {{ item.quantity ? item.quantity : "" }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>

    <el-drawer v-model="drawer" destroy-on-close title="订单详情" size="75%">
      <DetailPage :detailId="detailId" :typeId="1" append-to-body />
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import DetailPage from "../../OrderList/component/DetailPage.vue";
import { useUserStore } from "@/pinia";
import { storeToRefs } from "pinia";
import { watchStorage, setStorageWithEvent } from "@/utils/GlobalMonitoring.js";
import { handleApiResponse } from "@/utils/request.js";
import { GetGlassesStoreOrderList } from "../../../../../wailsjs/go/api/GoodsApi";

const userStore = useUserStore();
const { checkDetailForm } = storeToRefs(userStore);

onMounted(() => {
  getList();
});

const page = ref(1);
const pageSize = ref(100);
const total = ref(0);
const tableData = ref([]);
async function getList() {
  handleApiResponse(() =>
    GetGlassesStoreOrderList({
      page: page.value,
      pageSize: pageSize.value,
      checkListId: checkDetailForm.value.id || null,
      customerId: checkDetailForm.value.relationId || checkDetailForm.value.customerId || null,
    })
  ).then((res) => {
    if (res.code == 0) {
      // console.log(res);
      tableData.value = res.data.list || [];
      total.value = res.data.total || 0;
    }
  });
}

const scroll_load = () => {
  if (pageSize.value < total.value) {
    pageSize.value += 100;
    getList();
  } else {
    return;
  }
};

const drawer = ref(false);
const detailId = ref(null);
const handleDetailBtn = (id) => {
  detailId.value = id;
  drawer.value = true;
};

let cleanup;
onMounted(() => {
  cleanup = watchStorage("refresh_history_order", (e) => {
    getList();
  });
  return () => cleanup();
});

onBeforeUnmount(() => {
  cleanup();
});
</script>

<style scoped lang="scss">
.history {
  :deep(.el-card__header) {
    @apply px-0 py-1 bg-[#f0f5f9];
  }
}

.order_item {
  &:hover {
    @apply cursor-pointer hover:bg-[var(--theme-color)] hover:text-[white];
    :deep(.is-vertical-label),
    :deep(.el-descriptions__content) {
      @apply bg-[var(--theme-color)] text-[white];
    }
  }
}
</style>